.container {
  display: flex;
  flex-direction: column;
}
.missing-config {
  padding: 2px 12px 0 12px;
  font-weight: 500;
  font-style: italic;
}

.configurations {
  display: flex;
  flex-direction: column;

  &__item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    height: var(--list-item-height);
    padding: 0 12px;

    &:hover {
      background-color: var(--vscode-list-hoverBackground);

      .configurations__item__right {
        display: flex;
      }
    }

    &--highlighted {
      background-color: var(--vscode-list-inactiveSelectionBackground);
    }

    &__left {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      height: 100%;

      &__drag_handle {
        display: flex;
        align-items: center;
        height: 100%;
        cursor: grab;
        opacity: 0.5;

        &:active {
          cursor: grabbing;
        }
      }

      &__text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.2;

        > span:nth-child(2) {
          color: var(--vscode-descriptionForeground);
          margin-left: 0.5em;
          font-size: 0.9em;
        }
      }
    }

    &__right {
      display: none;
      align-items: center;
      cursor: default;
    }
  }
}

.arrow-animate {
  animation: arrow-left-move 2s infinite;
  font-weight: 600 !important;
}

@keyframes arrow-left-move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-8px);
  }
  100% {
    transform: translateX(0);
  }
}

.footer {
  display: flex;
  padding: 8px 12px 12px 12px;

  > button {
    flex: 1;
  }
}
